import { useRef, useState } from "react";
import { message, Button } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList, add, update, remove } from "@/api/region";
import { PlusOutlined } from "@ant-design/icons";
import { history } from "umi";
import { filterPackageType } from "@/const";
import ProForm, { ModalForm, ProFormText } from "@ant-design/pro-form";

const Package = () => {
  const formRef = useRef();

  const columns = [
    {
      title: "区/街道名称",
      dataIndex: "name",
      width: 150,
    },
    {
      title: "区/街道编码",
      dataIndex: "code",
      width: 150,
    },
  ];

  const renderModalForm = (actionType, record, actionRef) => {
    // actionType 1=新增区 2=修改区 3=新增街道 4=修改街道
    const maps = {
      1: "新增区",
      2: "修改区",
      3: "新增街道",
      4: "修改街道",
    };

    const handleAddOrUpdate = async (fields) => {
      const postData = {
        ...fields,
        id: actionType === 3 ? "" : record?.id,
        parentId: actionType === 3 ? record.id : record?.parentId,
      };
      let func = add;
      if (actionType === 2 || actionType === 4) {
        func = update;
      }
      const res = await func(postData);
      if (res.data) {
        message.success(maps[actionType] + "成功");
        actionRef.current?.reload();
        return true; // 关闭弹框
      }
    };

    return (
      <ModalForm
        key={maps[actionType]}
        formRef={formRef}
        labelCol={{ span: 4 }}
        layout="horizontal"
        title={maps[actionType]}
        width={600}
        trigger={
          <Button
            type={[1, 3].includes(actionType) ? "primary" : "default"}
            style={{ marginRight: 10 }}
            key="update"
          >
            {maps[actionType]}
          </Button>
        }
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            formRef.current?.resetFields();
          },
        }}
        onFinish={async (values) => {
          return await handleAddOrUpdate(values);
        }}
        initialValues={{
          ...record,
          name: actionType === 3 ? "" : record?.name,
          code: actionType === 3 ? "" : record?.code,
        }}
      >
        <ProFormText hidden label="id" name="id" />
        <ProFormText hidden label="父级id" name="parentId" />

        <ProFormText
          label={[1, 2].includes(actionType) ? "区名称" : "街道名称"}
          name="name"
          rules={[
            { required: true, message: "请输入" },
            {
              max: 50,
              message: "最长为50位",
            },
          ]}
        />
        <ProFormText
          label={[1, 2].includes(actionType) ? "区编码" : "街道编码"}
          name="code"
          rules={[
            {
              max: 50,
              message: "最长为50位",
            },
          ]}
        />
      </ModalForm>
    );
  };

  return (
    <PageContainer>
      {useCommonTable({
        pagination: false,
        title: "区",
        search: false,
        columns,
        modalWidth: 600,
        fetchList,
        remove,
        actionColumnWidth: 200,
        showCheckbox: false,
        renderAdd: (actionRef) => {
          return renderModalForm(1, {}, actionRef);
        },
        renderEdit: (record, actionRef) => {
          return renderModalForm(
            record.parentId === 0 ? 2 : 4,
            record,
            actionRef
          );
        },
        renderOtherAction: (_, record, actionRef) => {
          return record.parentId === 0
            ? renderModalForm(3, record, actionRef)
            : null;
        },
      })}
    </PageContainer>
  );
};

export default Package;
